<template>
    <div>
      <!-- :rowSelection="rowSelectionConfig" -->
      <a-table
        ref="cgformAutoList"
        bordered
        size="middle"
        rowKey="id"
        :columns="tableColumn"
        :dataSource="table.dataSource"
        :pagination="table.pagination"
        :loading="table.loading"
        :rowSelection="rowSelectionConfig"
        @change="handleTableChange"
        :scroll="tableScroll"
        :class="{'j-table-force-nowrap': enableScrollBar}"
        :customRow="customRow"
        style="min-height: 300px">
        <template slot="formatSlot" slot-scope="text, record, index, column">
          <div v-if="column.jsEnhance" class="custom-render" v-html="text ? columnJsEnhance[column.dataIndex](text, record,index) : ''"></div>
          <span v-if="!column.jsEnhance">{{text}}</span>
        </template>

        <template slot="dateSlot" slot-scope="text, record, index, column">
          <div v-if="column.jsEnhance" class="custom-render"  v-html="getFormatDate(text, column,record,index)"></div>
          <span v-if="!column.jsEnhance">{{ getFormatDate(text, column,record,index) }}</span>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="pcaSlot" slot-scope="text">
          <div>{{ getPcaText(text) }}</div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="加载失败" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>

        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadRowFile(text)">
            下载
          </a-button>
        </template>
      </a-table>
      <onl-cgform-auto-modal @success="handleFormSuccess" ref="modal" :code="code" @schema="handleGetSchema" />
    </div>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { HrefJump } from '@/mixins/OnlAutoListMixin'
import OnlCgformAutoModal from '@/views/modules/online/cgformys/auto/OnlCgformAutoModal'
import { postAction, getAction, deleteAction, getFileAccessHttpUrl } from '@/api/manage'
import { filterObj } from '@/utils/util'
// import ButtonExpHandler from '@/components/online/autoform/model/ButtonExpHandler'
import { onlUtil } from '@/mixins/OnlineCommonUtil'
import lodash_object from 'lodash'
import Vue from 'vue'

export default {
  name: 'ManyAutoTable',
  mixins: [HrefJump, mixinDevice, onlUtil],
  components: {
    OnlCgformAutoModal
  },
  props: {
    tableCode: {
      type: String,
      default: '804cd1dd41d64c6ca6ab2955eea57e35'
    }
  },
  data() {
    return {
      code: '',
      lodash: lodash_object,
      description: '在线报表功能测试页面',
      currentTableName: '',
      url: {
        getQueryInfo: '/online/cgform/api/getQueryInfo/',
        getColumns: '/online/cgform/api/getColumns/',
        loadFormItems: '/online/cgform/api/getFormItem/',
        getData: '/online/cgform/api/getData/',
        optPre: '/online/cgform/api/form/',
        exportXls: '/online/cgform/api/exportXls/',
        buttonAction: '/online/cgform/api/doButton',
        startProcess: '/process/extActProcess/startMutilProcess',
        getSubTableCode: '/online/cgform/api/getSubTableCode'
      },
      flowCodePre: 'onl_',
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      dictOptions: {

      },
      // cgButtonLinkList: [],
      // cgButtonList: [],
      queryInfo: [],
      // 查询参数，多个页面的查询参数用 code 作为键来区分
      queryParamsMap: {},
      toggleSearchStatus: false,
      subTableStr: [], // 子表表名
      subTable: [],
      subCode: '', // 子表ID
      currTabActive: 0,
      customKey: '',
      table: {
        loading: true,
        scroll: { x: false },
        // 表头
        columns: [],
        // 数据集
        dataSource: [],
        // 选择器
        selectedRowKeys: [],
        selectionRows: [],
        // 分页参数
        pagination: {

        }
      },
      metaPagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // actionColumn: {
      // title: '操作',
      // dataIndex: 'action',
      // scopedSlots: { customRender: 'action' }
      // // fixed:"right",
      // align: 'center',
      // width: 150
      // },
      formTemplate: '99',
      EnhanceJS: '',
      hideColumns: [],
      columnJsEnhance: {},
      currRecord: {},
      head: {},
      // buttonSwitch: {
      //   add: true,
      //   update: true,
      //   delete: true,
      //   batch_delete: true,
      //   import: true,
      //   export: true,
      //   detail: true
      // },
      // hasBpmStatus: false,
      checkboxFlag: false,
      // 高级查询
      superQuery: {
        // 字段列表
        fieldList: [],
        // 查询参数
        params: '',
        // 查询条件拼接方式 'and' or 'or'
        matchType: 'and'
      },
      scrollFlag: 0,
      settingColumns: [],
      defColumns: [],
      subTableIsShow: false
    }
  },
  created() {
    this.initAutoList()
  },
  mounted() {
    this.cgButtonJsHandler('mounted')
  },
  watch: {
    '$route'() {
      // 刷新参数放到这里去触发，就可以刷新相同界面了
      this.initAutoList()
    }
  },
  computed: {
    rowSelectionConfig: function() {
      if (!this.checkboxFlag) {
        return null
      }
      return {
        // fixed:true,
        selectedRowKeys: this.table.selectedRowKeys,
        onChange: this.handleChangeInTableSelect
      }
    },
    queryParam: {
      get() {
        return this.queryParamsMap[this.code]
      },
      set(newVal) {
        this.$set(this.queryParamsMap, this.code, newVal)
      }
    },
    enableScrollBar() {
      return this.scrollFlag === 1 || this.isMobile()
    },
    tableScroll() {
      // 移动端模式下无论如何都开启横向滚动条
      if (this.enableScrollBar) {
        return undefined
      } else {
        return this.table.scroll
      }
    },
    tableColumn() {
      if (!this.settingColumns || this.settingColumns.length <= 0) {
        return this.defColumns
      } else {
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (this.settingColumns.includes(item.dataIndex)) {
            return true
          }
          return false
        })

        cols.forEach((item, index) => {
          if (item.jsEnhance) {
            var obj = eval('(' + item.jsEnhance + ')')
            this.columnJsEnhance[item.dataIndex] = obj.customRender
          }
        })
        console.log(cols)
        return cols
      }
    },
    localCode() {
      return 'onl_' + this.currentTableName
    }
  },
  methods: {
    // hasBpmStatusFilter() {
    //   var columnObjs = this.defColumns
    //   const columns = []
    //   for (var item of columnObjs) {
    //     columns.push(item.dataIndex)
    //   }
    //   if (columns.includes('bpm_status') || columns.includes('BPM_STATUS')) {
    //     this.hasBpmStatus = true
    //   } else {
    //     this.hasBpmStatus = false
    //   }
    // },
    // startProcess: function(record) {
    //   var that = this
    //   this.$confirm({
    //     title: '提示',
    //     content: '确认提交流程吗?',
    //     onOk: function() {
    //       var param = {
    //         flowCode: that.flowCodePre + that.currentTableName,
    //         id: record.id,
    //         formUrl: 'modules/bpm/task/form/OnlineFormDetail',
    //         formUrlMobile: 'online/OnlineDetailForm'
    //       }
    //       postAction(that.url.startProcess, param).then((res) => {
    //         if (res.success) {
    //           that.$message.success(res.message)
    //           that.loadData()
    //           that.onClearSelected()
    //         } else {
    //           that.$message.warning(res.message)
    //         }
    //       })
    //     }
    //   })
    // },
    // handlePreviewPic: function(record) {
    //   var flowCode = this.flowCodePre + this.currentTableName
    //   var dataId = record.id
    //   this.$refs.processInstPicModal.preview(flowCode, dataId)
    //   this.$refs.processInstPicModal.title = '流程图'
    // },
    // initQueryInfo() {
    //   getAction(`${this.url.getQueryInfo}${this.code}`).then((res) => {
    //     if (res.success) {
    //       this.queryInfo = res.result
    //       // 查询条件form 默认值设置
    //       for (const item of res.result) {
    //         if (item.config === '1') {
    //           if (item.defValue && item.defValue.length > 0 && item.mode === 'single') {
    //             this.$set(this.queryParam, item.field, item.defValue)
    //           }
    //         }
    //       }
    //     } else {
    //       this.$message.warning(res.message)
    //     }
    //   })
    // },
    initAutoList() {
      if (!this.tableCode) {
        return false
      }
      // 清空高级查询条件
      // this.superQuery.params = ''
      // if (this.$refs.superQuery) {
      //   this.$refs.superQuery.handleReset()
      // }

      this.table.loading = true
      this.code = this.tableCode
      if (!this.queryParam) {
        this.queryParam = {}
      }
      getAction(`${this.url.getColumns}${this.code}`).then((res) => {
        if (res.success) {
          if (res.result.checkboxFlag == 'Y') {
            this.checkboxFlag = true
          } else {
            this.checkboxFlag = false
          }

          if (res.result.paginationFlag == 'Y') {
            this.table.pagination = { ...this.metaPagination }
          } else {
            this.table.pagination = false
          }
          // href 跳转
          const fieldHrefSlotKeysMap = {}
          res.result.fieldHrefSlots.forEach(item => fieldHrefSlotKeysMap[item.slotName] = item)
          this.dictOptions = res.result.dictOptions
          this.formTemplate = res.result.formTemplate
          this.description = res.result.description
          this.currentTableName = res.result.currentTableName
          // this.initCgButtonList(res.result.cgButtonList)
          this.initCgEnhanceJs(res.result.enhanceJs)
          // this.initButtonSwitch(res.result.hideColumns)
          res.result.columns.forEach(column => {
            Object.keys(column).map(key => {
              // 删掉空值的字段（不删除 空字符串('') 或 数字 0 ）
              if (column[key] == null) {
                delete column[key]
              }
            })
            // 处理列中的 href 跳转和 dict 字典，使两者可以兼容存在
            this.handleColumnHrefAndDict(column, fieldHrefSlotKeysMap)
          })
          this.defColumns = res.result.columns
          this.settingColumnsHandler(res.result.columns)
          this.scrollFlag = res.result.scrollFlag
          // this.hasBpmStatusFilter()
          this.loadData()
          // this.initQueryInfo()
          // 加载新路由，清空checkbox选中
          this.table.selectedRowKeys = []
        } else {
          this.$message.warning(res.message)
        }
      })

      this.getCgformItem()
    },
    loadData(arg) {
      if (this.table.pagination) {
        if (arg == 1) {
          this.table.pagination.current = 1
        }
        this.table.loading = true
        const params = this.getQueryParams()// 查询条件
        getAction(`${this.url.getData}${this.code}`, params).then((res) => {
          if (res.success) {
            const result = res.result
            if (Number(result.total) > 0) {
              this.table.pagination.total = Number(result.total)
              this.table.dataSource = result.records
            } else {
              this.table.pagination.total = 0
              this.table.dataSource = []
              // this.$message.warning("查无数据")
            }
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.table.loading = false
        })
      } else {
        this.loadDataNoPage()
      }
    },
    loadDataNoPage() {
      this.table.loading = true
      const param = this.getQueryParams()// 查询条件
      param['pageSize'] = -521
      getAction(`${this.url.getData}${this.code}`, filterObj(param)).then((res) => {
        if (res.success) {
          const result = res.result
          if (Number(result.total) > 0) {
            this.table.dataSource = result.records
          } else {
            this.table.dataSource = []
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.table.loading = false
      })
    },
    // 查询在线表单的配置
    getCgformItem() {
      if (!this.code) {
        return
      }
      getAction(`${this.url.loadFormItems}${this.code}`).then((res) => {
        if (res.success) {
          const head = res.result.head
          this.head = head
          const isShowSubTable = res.result.head.isShowSubTable
          if (isShowSubTable == 'Y' && head.subTableStr) {
            this.subTableStr = head.subTableStr.split(',')
            this.subTableIsShow = true
            this.getSubTable()
          } else {
            this.subTableIsShow = false
          }
        }
      })
    },
    getSubTable() {
      getAction(this.url.getSubTableCode + '/' + this.subTableStr).then((res) => {
        if (res.success) {
          this.subTable = res.result
        }
      })
    },
    getQueryParams() {
      const param = Object.assign({}, this.queryParam, this.isorter)
      param.pageNo = this.table.pagination.current
      param.pageSize = this.table.pagination.pageSize
      // param.superQueryMatchType = this.superQuery.matchType
      // param.superQueryParams = encodeURIComponent(this.superQuery.params)
      return filterObj(param)
    },
    handleChangeInTableSelect(selectedRowKeys, selectionRows) {
      this.table.selectedRowKeys = selectedRowKeys
      this.table.selectionRows = selectionRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange(pagination, filters, sorter) {
      // TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      if (this.table.pagination) {
        this.table.pagination = pagination
      }
      this.loadData()
    },
    handleAdd() {
      this.cgButtonJsHandler('beforeAdd')
      this.$refs.modal.add(this.formTemplate)
    },
    // handleImportXls() {
    //   this.$refs.importModal.show()
    // },
    // importOk() {
    //   this.loadData(1)
    // },
    // handleExportXls2() {
    //   const param = this.queryParam
    //   if (this.table.selectedRowKeys && this.table.selectedRowKeys.length > 0) {
    //     param['selections'] = this.table.selectedRowKeys.join(',')
    //   }
    //   const paramsStr = encodeURI(JSON.stringify(param))
    //   const url = window._CONFIG['domianURL'] + this.url.exportXls + this.code + '?paramsStr=' + paramsStr
    //   window.location.href = url
    // },
    // handleExportXls() {
    //   const param = this.queryParam
    //   if (this.table.selectedRowKeys && this.table.selectedRowKeys.length > 0) {
    //     param['selections'] = this.table.selectedRowKeys.join(',')
    //   }
    //   const paramsStr = JSON.stringify(filterObj(param))
    //   downFile(this.url.exportXls + this.code, { paramsStr: paramsStr }).then((data) => {
    //     if (!data || data.size === 0) {
    //       this.$message.warning('文件下载失败')
    //       return
    //     }
    //     if (typeof window.navigator.msSaveBlob !== 'undefined') {
    //       window.navigator.msSaveBlob(new Blob([data]), this.description + '.xls')
    //     } else {
    //       const url = window.URL.createObjectURL(new Blob([data]))
    //       const link = document.createElement('a')
    //       link.style.display = 'none'
    //       link.href = url
    //       link.setAttribute('download', this.description + '.xls')
    //       document.body.appendChild(link)
    //       link.click()
    //       document.body.removeChild(link) // 下载完成移除元素
    //       window.URL.revokeObjectURL(url) // 释放掉blob对象
    //     }
    //   })
    // },
    handleEdit(record) {
      this.cgButtonLinkHandler(record, 'beforeEdit', 'js')
      this.$refs.modal.edit(this.formTemplate, record.id)
    },
    // showLinkButton(item, record) {
    //   const btn = new ButtonExpHandler(item.exp, record)
    //   return btn.show
    // },
    handleDetail(record) {
      this.$refs.modal.detail(this.formTemplate, record.id)
    },
    handleDeleteOne(record) {
      this.cgButtonLinkHandler(this.currRecord, 'beforeDelete', 'js')
      this.handleDelete(this.currRecord.id)
    },
    handleDelete(id) {
      deleteAction(this.url.optPre + this.code + '/' + id).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    handleFormSuccess() {
      this.loadData()

      if (this.subTableIsShow) {
        if (this.subTable[this.currTabActive].relationType == 0) {
          this.$refs.subTableList[this.currTabActive].currRecord = this.currRecord
          this.$refs.subTableList[this.currTabActive].loadData()
        } else {
          this.$refs.subTableList[this.currTabActive].detail(this.formTemplate, this.currRecord.id)
        }
      }
    },
    // 查询完 schema 后，生成高级查询的字段列表
    handleGetSchema(schema) {
      if (schema && schema.properties) {
        const setField = (array, field) => {
          let type = field.view || (field.type || 'string')
          type = (type === 'inputNumber' ? 'number' : type)
          const params = {
            type: type,
            value: field.key,
            text: field.title,
            // 额外字典参数
            dictCode: field.dictCode,
            dictTable: field.dictTable,
            dictText: field.dictText,
            options: field.enum || field.options,
            order: field.order
          }
          // 处理popup
          if (type === 'popup') {
            params['popup'] = {
              code: field.popupCode || field.code,
              field: field.orgFields.split(',')[0],
              orgFields: field.orgFields.split(',')[0],
              destFields: field.destFields.split(',')[0]
            }
          }
          array.push(params)
        }
        const fieldList = []
        for (const key in schema.properties) {
          if (!schema.properties.hasOwnProperty(key)) {
            continue
          }
          const field = schema.properties[key]
          // tab = 子表 一对多
          if (field.view === 'tab' && field.relationType == 0) {
            const subTable = {
              type: 'sub-table',
              value: field.key,
              text: field.describe,
              children: []
            }
            if (field.columns) {
              for (const column of field.columns) {
                setField(subTable.children, column)
              }
            }
            fieldList.push(subTable)
            // tab = 子表 一对一
          } else if (field.view === 'tab' && field.relationType == 1) {
            const subTable = {
              type: 'sub-table',
              value: field.key,
              text: field.describe,
              children: []
            }
            Object.keys(field.properties).map(k => {
              field.properties[k]['key'] = k
              setField(subTable.children, field.properties[k])
            })
            fieldList.push(subTable)
          } else {
            field.key = key
            setField(fieldList, field)
          }
        }
        // 冒泡排序
        for (let i = 0; i < fieldList.length; i++) {
          for (let j = i + 1; j < fieldList.length; j++) {
            const temp1 = fieldList[i]
            const temp2 = fieldList[j]
            if (temp1.order > temp2.order) {
              fieldList[i] = temp2
              fieldList[j] = temp1
            }
          }
        }
        this.superQuery.fieldList = fieldList
      }
    },
    onClearSelected() {
      this.table.selectedRowKeys = []
      this.table.selectionRows = []
    },
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    downloadRowFile(text) {
      if (!text) {
        this.$message.warning('未知的文件')
        return
      }
      if (text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      const url = getFileAccessHttpUrl(text)
      window.open(url)// TODO 下载的方法
    },
    handleDelBatch() {
      if (this.table.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return false
      } else {
        let ids = ''
        const that = this
        that.table.selectedRowKeys.forEach(function(val) {
          ids += val + ','
        })
        that.$confirm({
          title: '确认删除',
          content: '是否删除选中数据?',
          onOk: function() {
            that.handleDelete(ids)
            that.onClearSelected()
          }
        })
      }
    },

    // searchByquery() {
    //   this.loadData(1)
    // },
    // searchReset() {
    //   this.queryParam = {}
    //   this.loadData(1)
    // },
    // handleToggleSearch() {
    //   this.toggleSearchStatus = !this.toggleSearchStatus
    // },
    // changeColor(e) {
    // },
    getFormatDate(text, column, record, index) {
      if (!text) {
        return ''
      }
      let a = text
      if (a.length > 10) {
        a = a.substring(0, 10)
      }

      if (column.jsEnhance) {
        return this.columnJsEnhance[column.dataIndex](a, record, index)
      }
      return a
    },
    // getImportUrl() {
    //   return '/online/cgform/api/importXls/' + this.code
    // },
    initCgEnhanceJs(enhanceJs) {
      if (enhanceJs) {
        const Obj = eval('(' + enhanceJs + ')')
        this.EnhanceJS = new Obj(getAction, postAction, deleteAction)
        this.cgButtonJsHandler('created')
      } else {
        this.EnhanceJS = ''
      }
    },
    // initCgButtonList(btnList) {
    //   const linkArr = []
    //   const buttonArr = []
    //   if (btnList && btnList.length > 0) {
    //     for (let i = 0; i < btnList.length; i++) {
    //       const temp = btnList[i]
    //       if (temp.buttonStyle == 'button') {
    //         buttonArr.push(temp)
    //       } else if (temp.buttonStyle == 'link') {
    //         linkArr.push(temp)
    //       }
    //     }
    //   }
    //   this.cgButtonLinkList = [...linkArr]
    //   this.cgButtonList = [...buttonArr]
    // },
    cgButtonJsHandler(buttonCode) {
      if (this.EnhanceJS[buttonCode]) {
        this.EnhanceJS[buttonCode](this)
      }
    },
    // cgButtonActionHandler(buttonCode) {
    //   // 处理自定义button的 需要配置该button自定义sql
    //   if (!this.table.selectedRowKeys || this.table.selectedRowKeys.length == 0) {
    //     this.$message.warning('请先选中一条记录')
    //     return false
    //   }
    //   if (this.table.selectedRowKeys.length > 1) {
    //     this.$message.warning('请只选中一条记录')
    //     return false
    //   }
    //   const params = {
    //     formId: this.code,
    //     buttonCode: buttonCode,
    //     dataId: this.table.selectedRowKeys[0]
    //   }
    //   postAction(this.url.buttonAction, params).then(res => {
    //     if (res.success) {
    //       this.loadData()
    //       this.$message.success('处理完成!')
    //     } else {
    //       this.$message.warning('处理失败!')
    //     }
    //   })
    // },
    cgButtonLinkHandler(record, buttonCode, optType) {
      if (optType == 'js') {
        if (this.EnhanceJS[buttonCode]) {
          this.EnhanceJS[buttonCode](this, record)
        }
      } else if (optType == 'action') {
        const params = {
          formId: this.code,
          buttonCode: buttonCode,
          dataId: record.id
        }
        postAction(this.url.buttonAction, params).then(res => {
          if (res.success) {
            this.loadData()
            this.$message.success('处理完成!')
          } else {
            this.$message.warning('处理失败!')
          }
        })
      }
    },
    // initButtonSwitch(hideColumns) {
    //   Object.keys(this.buttonSwitch).forEach(key => {
    //     this.buttonSwitch[key] = true
    //   })
    //   if (hideColumns && hideColumns.length > 0) {
    //     Object.keys(this.buttonSwitch).forEach(key => {
    //       if (hideColumns.indexOf(key) >= 0) {
    //         this.buttonSwitch[key] = false
    //       }
    //     })
    //   }
    // },

    // 高级查询
    // handleSuperQuery(params, matchType) {
    //   if (!params || params.length === 0) {
    //     this.superQuery.params = ''
    //   } else {
    //     this.superQuery.params = JSON.stringify(params)
    //   }
    //   this.superQuery.matchType = matchType
    //   this.loadData(1)
    // },

    settingColumnsHandler(columns) {
      const str = Vue.ls.get(this.localCode)
      if (!str || str.length == 0) {
        this.settingColumns = []
        columns.forEach(column => {
          if (this.settingColumns.indexOf(column['dataIndex']) < 0) {
            this.settingColumns.push(column['dataIndex'])
          }
        })
      } else {
        this.settingColumns = str.split(',')
      }
    },
    popVisibleChange(visible) {
      if (this.settingColumns && this.settingColumns.length > 0) {
        Vue.ls.set(this.localCode, this.settingColumns.join(','))
      }
    },
    // tab页面切换
    // tabChange(activeKey) {
    //   this.currTabActive = parseInt(activeKey)
    //   this.$nextTick(function() {
    //     if (this.$refs.subTableList[this.currTabActive]) {
    //       if (this.subTable[this.currTabActive].relationType == 0) {
    //         this.$refs.subTableList[this.currTabActive].currRecord = this.currRecord
    //         this.$refs.subTableList[this.currTabActive].loadData()
    //       } else {
    //         if (Object.keys(this.currRecord).length > 0) {
    //           this.$refs.subTableList[this.currTabActive].detail(this.formTemplate, this.currRecord.id)
    //         }
    //       }
    //     }
    //   })
    // },
    customRow(record, index) {
      return {
        // 这个style就是我自定义的属性，也就是官方文档中的props
        style: {
          // 行背景色
          'background-color': record.id === this.customKey ? '#e6f7ff' : ''
        },
        on: {
          // 鼠标单击行
          click: event => {
            // 根据行记录ID、子表名称查询子表配置属性及数据
            this.customKey = record.id
            this.currRecord = record

            const isShowSubTable = this.head.isShowSubTable
            if (isShowSubTable == 'Y' && this.head.subTableStr && !this.subTableIsShow) {
              this.subTableIsShow = true
            }
            if (!this.subTableIsShow) {
              return false
            }
            if (this.subTable[this.currTabActive].relationType == 0) {
              this.$refs.subTableList[this.currTabActive].currRecord = record
              this.$refs.subTableList[this.currTabActive].loadData()
            } else {
              this.$refs.subTableList[this.currTabActive].detail(this.formTemplate, record.id)
            }
          }
        }
      }
    }
  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
<style>
  .ant-card-body .table-operator{
    margin-bottom: 18px;
  }
  .ant-table-tbody .ant-table-row td{
    padding-top:15px;
    padding-bottom:15px;
  }
  .anty-row-operator button{margin: 0 5px}
  .ant-btn-danger{background-color: #ffffff}

  .anty-img-wrap{height:25px;position: relative;}
  .anty-img-wrap > img{max-height:100%;}
  .ant-modal-cust-warp{height: 100%}
  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
  .custom-render>*{
    display: inline-block;
    min-width: 20px;
    height: 100%;
    border-radius: 5px;
  }
  .custom-render{
    display: inline-block;
  }
</style>
